<!--
 * @Author: 秦福凯
 * @LastEditTime: 2025-10-31 10:14:34
 * @Description: 头部组件
-->
<template>
	<div class="header">
		<!-- 折叠按钮 -->
		<div class="header-left">
			<div class="web-title">快投自媒体推广</div>
			<div v-if="props.withCollapse" class="collapse-btn btn-icon" @click="collapseChage" >
				<el-icon v-if="sidebar.collapse">
					<Expand />
				</el-icon>
				<el-icon v-else>
					<Fold />
				</el-icon>
			</div>

			
			<div style="margin-left: 12px;font-size: 20px;font-weight: bold;">
				账号：{{ userInfo.tenantAccount }}
			</div>

			<div style="margin-left: 12px;font-size: 20px;font-weight: bold;">
				余额：{{ userInfo.cumulativePoints }}
			</div>

			<div style="margin-left: 12px;">
					<u-button @click="rechargeM" type="primary" icon="Coin" >立即充值</u-button>
			</div>
		</div>
		<div class="header-right">
			<div class="header-user-con">
				<div class="otherContent" style="margin: 0;">
					<span style="margin: 2px;display: inline-block;cursor: pointer;" @click="openDrawer">
					<el-tooltip effect="dark" content="主题" placement="bottom"> 
						<u-icon className="u-m-svg-icon" iconName="icon-pifuzhuti-xianxing" :color="'var(--el-header-text-color)'"></u-icon>
					</el-tooltip>
					</span>
				</div>
				<div class="btn-icon" @click="setFullScreen">
					<el-tooltip effect="dark" content="全屏" placement="bottom">
						<i class="el-icon-lx-full"></i>
					</el-tooltip>
				</div>
				<!-- 时间 -->
				<div>
					<span style="line-height: 48px;  font-size: 20px;font-weight: bold;">{{currentTime }}</span>
				</div>

				<!-- 用户信息 -->
				<div class="user-info">
					<el-dropdown>
						<span class="el-dropdown-link">
							{{ username }}
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="openDialog">
									<el-icon><User /></el-icon>修改密码
								</el-dropdown-item>
								<el-dropdown-item  @click="logout">
									<el-icon><SwitchButton /></el-icon>退出登录
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
		
				 </div>
			</div>
		</div>
		<!-- 侧边抽屉组件 -->
		<u-ThemeDrawer></u-ThemeDrawer>
		<!-- 修改密码弹窗 -->
		<u-dialog :show="dialogShow" @close="dialogShowClose" title="密码修改">
			<u-form ref="refform" :element="formList" :form="form"></u-form>
		</u-dialog>


		<!-- 充值弹窗 -->
		 <u-rechargeDialog :show="reSHow" @close="rechargeCose">

		 </u-rechargeDialog>
	</div>
</template>
<script setup >
	import { ref, onMounted, reactive } from 'vue'
	import { useSidebarStore } from '../store/sidebar'
	import { useRouter } from 'vue-router'
	import mittBus from "@/utils/mittBus.js"
	import { useUserStore } from "@/store/busi/user"
  import busi_api from '@/api/busiApi'


	//是否展示侧边栏折叠按钮
	const props = defineProps({
		withCollapse: {
			type: Boolean,
			default: true,
		},
		withColorSet: {
			type: Boolean,
			default: true,
		}
	});

	const sidebar = useSidebarStore();
	const userStore = useUserStore()
	const username = computed(() => userStore.userInfo.name)

	// 时间组件
	const  currentTime = ref(getFormattedTime())

	let userInfo = reactive({
		tenantAccount:'xxx',
		cumulativePoints:0,

	})
	function getInfo(){
    busi_api.getInfo().then(res =>{
      if(res.data.code == 200){
        userInfo = res.data.data
      }
    })
	}

	// 获取格式化后的时间
	function getFormattedTime() {
		const now = new Date();
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');
		return `${hours}:${minutes}:${seconds}`;
	}

	// 更新时间
	let timer;
	function updateTime() {
		currentTime.value = getFormattedTime();
	}


	
	// 侧边栏折叠
	const collapseChage = () => {
		sidebar.handleCollapse();
	};

	onMounted(() => {
		getInfo()
		if (document.body.clientWidth < 1500) {
			collapseChage();
		}
		// 组件挂载时启动定时器
		timer = setInterval(updateTime, 1000); // 每秒更新一次
	});
   // 组件卸载时清除定时器
	onUnmounted(() => {
		clearInterval(timer);
	});

	// 用户名下拉菜单选择事件
	const router = useRouter();
	const handleCommand = () => {
		if (command == 'loginout') {
			localStorage.clear();
			sessionStorage.clear();
			router.replace('/login');
		} else if (command == 'user') {
			router.push('/userCenter');
		}
	};

	const setFullScreen = () => {
		if (document.fullscreenElement) {
			document.exitFullscreen();
		} else {
			document.body.requestFullscreen.call(document.body);
		}
	};

	// 主题样式打开侧边抽屉组件
	function openDrawer(){
		// 发射打开事件
		mittBus.emit("openThemeDrawer")
	}

	let dialogShow = ref(false)
	const refform = ref(null)

	let form = reactive({

	})
	let formList = reactive([
  	{label:'原密码:',key:'deviceNo',type:'password',placeholder:"",sp:24,re:true,},
  	{label:'新密码:',key:'deviceNo2',type:'password',placeholder:"",sp:24,re:true},
  	{label:'确认新密码',key:'deviceNo4',type:'password',placeholder:"",sp:24,re:true},
	])
	// 修改密码
	function openDialog(){
		dialogShow.value = true
	}
	function dialogShowClose(){
		refform.value.soform.resetFields()
		dialogShow.value = false
	}

	// 退出登录
	function logout(){
		ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
		}).then(async () => {
			// 清除 Token 缓存
			userStore.setToken("");
			localStorage.clear();
			sessionStorage.clear();
			// 3.重定向到登陆页
			router.replace('/login');
			ElMessage.success("退出登录成功！");
		});
	}


	let reSHow = ref(false)
	function rechargeM(){
		reSHow.value = true
	}

	function rechargeCose(){
		reSHow.value = false
	}

</script>
<style scoped lang="scss">
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		background-color: var(--el-header-bg-color);
		border-bottom: 1px solid var(--el-header-border-color);
	}

	.header-left {
		display: flex;
		align-items: center;
		padding-left: 20px;
		height: 100%;
	}

	.logo {
		width: 35px;
	}

	.web-title {
		font-size: 21.5px;
    font-weight: bold;
    color: var(--el-aside-logo-text-color);
    white-space: nowrap;
	}

	.collapse-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 0 10px;
		cursor: pointer;
		opacity: 0.8;
		font-size: 22px;
	}

	.collapse-btn:hover {
		opacity: 1;
	}

	.header-right {
		float: right;
		padding-right: 40px;
		.user-info{
		background: var(--el-color-primary);
		margin-left: 16px;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		}
	}

	.header-user-con {
		display: flex;
		height: 70px;
		align-items: center;
	}

	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 5px;
		font-size: 24px;
	}

	.btn-icon {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		cursor: pointer;
		display: flex;
		align-items: center;
		color: var(--el-header-text-color) !important;
		margin: 0 5px;
		font-size: 20px;
	}

	.btn-bell-badge {
		position: absolute;
		right: 4px;
		top: 0px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}

	.user-avator {
		margin: 0 10px 0 20px;
	}

	.el-dropdown-link {
		cursor: pointer;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}

	.header-user-con{
		.el-dropdown{
			.el-dropdown-link{
				color: var(--u-white-color) !important;
			}
		}
	}


	
</style>